<template>
    <van-nav-bar title="商品详情" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-image
    width="100vw"
    height="200px"
    :src="productData.img"
    @click="showImg"></van-image>
  <van-row :gutter="[20, 20]">
      <van-col span="24" style="font-size: 16px; color: red;">
      <van-cell-group>
      <van-cell  :title=" productData.price" value="已售 1000+" label=" 热销款促销优惠立减10W" style="color: red; font-size:  18px; font-weight: 700;" />
    </van-cell-group>

      </van-col>
      <van-col span="24">
        {{ productData.name}}
      </van-col>
    </van-row>
    <!--评价-->
    <div  class="pj" >
      <van-cell title="评价" is-link value="全部" :border="false" />
      <p >商品很好就是有点难看了</p>
    </div>
 
  <van-divider :style="{ color: '#1989fa', padding: '0 16px' }">宝贝详情</van-divider>
    <!---详情-->
  <div class="brief">
    <div v-html="productData.brief"> </div>
  
  </div>

    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" @click="onClickIcon" />
      <van-action-bar-icon icon="cart-o" text="购物车"  @click="onClickIcon"/>
      <van-action-bar-icon icon="star" text="收藏" color="#ff5000"  @click="onClickIcon"/>
      <van-action-bar-button type="warning" text="加入购物车" @click="onClickButton"/>
      <van-action-bar-button type="danger" text="立即购买"  @click="onClickButton"/>
    </van-action-bar>

</template>
<script setup lang="ts">
import { showToast } from 'vant';
import { onMounted , reactive, ref } from 'vue';
import { useRoute } from 'vue-router';
let route = useRoute();
import { showImagePreview } from 'vant';
import { ProductApi } from '@/api';


const productData = reactive({
  name: '',
  brief: '',
  price: 0,
  img:''
})


let id=ref(0)
onMounted(() => { 
console.log(route.query.id);
  id.value = route.query.id == undefined ? 0 : Number(route.query.id)
  callProduct()
})

const imgArray=ref([])
const callProduct = () => { 
  ProductApi.select.call({ id: id.value }).then((res: any) => { 
    console.log(res);
    let product=res[0]
    productData.name = product.name
    productData.img = product.img
    productData.price = product.price
    productData.brief = product.brief

    imgArray.value = product.img.split(",")
  })
}
const showImg = () => { 
  showImagePreview({
    images: imgArray.value,
    closeable: true,
  });
}




const onClickIcon = () => {
  console.log("点击图标了");
  
};
const onClickButton = () => showToast('点击按钮');
const onClickLeft = () => history.back();
</script>
<style scoped>
.pj {
  margin-top: 20px;
  background-color: azure;
  border-top: 10px solid rgb(226, 228, 229);
}
.van-cell__title{
  font-size: 22px;
  font-weight: 700;
  color: red;
  .van-cell__label{
    color: rgb(216, 217, 218);
  }
}
</style>

<style >



</style>
